<template>
    <ul v-if="treeData && (treeData.children.length > 0 || treeData.ipc_list.length > 0)">
        <!-- catalog的目录 -->
        <li
         v-for="item in treeData.children"
         :key="item.id"
         @click="handleNodeClick(item)"
        >
            <span>
                <i class="el-icon el-icon-caret-right" v-if="!item.showChildren"></i>
                <i class="el-icon el-icon-caret-bottom" v-else></i>
                <i class="el-icon el-icon-folder"></i>
                <span class="catalogName" style="margin-left: 5px;">{{ item.name }}</span>
            </span>
            <ipcTree
            v-if="item.showChildren"
            :treeData="item"
            >
            </ipcTree>
        </li>
        <!-- ipc_list -->
        <li
         v-for="item in treeData.ipc_list"
         :key="item.uuid"
        >
            <span>
                <i class="el-icon el-icon-place"></i>
                <span>{{ item.name }}</span>
            </span>
        </li>
    </ul>
</template>
  
<script>
import ipcTree from './ipcTree.vue'
  export default {
    name: 'ipcTree',
    components: {
        ipcTree
    },
    props: {
      treeData: {}
    },
    data () {
      return {
      }
    },
    created() {
    },
    methods: {
        handleNodeClick (item) {
            this.$set(item, 'showChildren', !item.showChildren)
        }
    },
    computed: {
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  li {
    list-style: none;
    height: 26px;
    margin: 5px;
  }
  </style>
  